<template>
    <div class="shougong-box">
        <div class="show-box">
            <span class="left"></span>
            <span class="englishText">wear show</span>
            <span class="text">穿搭展示</span>
            <span class="right"></span>
        </div>
        <div class="header-bg">
            <div class="header">HandSome</div>
        </div>
        <div class="content-bg">
            <div class="content">
                <div class="content-left">
                    <div class="carrow-left" @click="turnLeft()"><i class="el-icon-arrow-up"></i></div>
                    <div class="carrow-right" @click="turnRight()"><i class="el-icon-arrow-down"></i></div>
                    
                    <div class="updown">
                        <div v-for="(item,index) in imgs" :key="index+'='" :class="item.className">
                            <img :src="item.src" :style="{borderColor: currentIndex == index ? 'red' : '#313131'}" @click="changeImg(item)">
                            <!-- <img :src="item.src" :style="{borderColor: item.line}" @click="changeImg(item)"> -->
                        </div>
                    </div>
                </div>
                <div class="content-right">
                    <div class="one2"><img :src="imgsNumber.src" alt=""></div>
                    <div class="two2"><img :src="imgsNumber.src2" alt=""></div>
                    <div class="three2"><img :src="imgsNumber.src3" alt=""></div>
                    <div class="rtitle">
                        <h1>{{ imgsNumber.name }}</h1>
                    </div>
                </div>
            </div>
        </div>
        <div class="content-border"></div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                imgs: [
                    {
                        line: "#313131",
                        className: "one",
                        name: "刘雯",
                        src: require("../../assets/h3.jpg"),
                        src2: require("../../assets/h3_2.jpg"),
                        src3: require("../../assets/h3_3.jpg")
                    },
                    {
                        line: "#313131",
                        className: "two",
                        name: "金泫雅",
                        src: require("../../assets/h1.jpg"),
                        src2: require("../../assets/h1_2.jpg"),
                        src3: require("../../assets/h1_3.jpg")
                        
                    },
                    {
                        line: "#313131",
                        className: "three",
                        name: "宋妍霏",
                        src: require("../../assets/h2.jpg"),
                        src2: require("../../assets/h2_2.jpg"),
                        src3: require("../../assets/h2_3.jpg")
                    },
                ],
                currentIndex: 0,
                imgsNumber: {
                   name: "刘雯",
                    src: require("../../assets/h3.jpg"),
                    src2: require("../../assets/h3_2.jpg"),
                    src3: require("../../assets/h3_3.jpg")
                }
            }
        },
        created() {
            this.currentIndex = 0
            this.imgs[this.currentIndex].line = "red"
        },
        methods: {
            // 切换图片
            changeImg(val) {
                // val是获取到左边对应的图片对象
                console.log(val);
                this.imgsNumber = val
            },
            turnLeft() {
                // 
                console.log(this.currentIndex);
                if(this.currentIndex > 0) {
                    // 设置边框
                    // this.imgs[this.currentIndex-1].line = "red"
                    // this.imgs[this.currentIndex].line = "#313131"
                    // if(this.currentIndex-1 >0) {
                    //     this.currentIndex = 0
                    // }
                    // 让下标减1
                    this.currentIndex --;
                }else {
                    // 让下标值从后面开始
                    this.currentIndex = this.imgs.length - 1;
                }   
                this.imgsNumber = this.imgs[this.currentIndex]
            },
            // 下箭头
            turnRight() {
                // 点击下箭头的时候图片加标+1
                console.log(this.currentIndex+1);
                // 如果当前下标的值小于imgs数组的长度（3）
                if(this.currentIndex < this.imgs.length-1) {
                    // 让下标加1
                    this.currentIndex ++;
                    // 设置边框
                    // this.imgs[this.currentIndex].line = "red"
                    // this.imgs[this.currentIndex-1].line = "#313131"
                    
                    // 设置边框
                }else {
                    // 把下标置0重新开始
                    this.currentIndex = 0;
                } 
                this.imgsNumber = this.imgs[this.currentIndex]
            }
        }
    }
</script>
<style scoped>
    .one img, .two img, .three img {
        border: 1px solid #313131;
    }
    .header-bg .header {
        font-size: 30px;
        line-height: 96px;
        color: aliceblue;
    }
    .content-border {
        width: 100%;
        height: 5px;
        background: #efefec;
        margin: 80px 0px;
    }
    .shougong-box {
        margin-bottom: 80px;
    }
    .content {
        width: 1100px;
        /* height: 810px; */
        margin: 0 auto;
        background: #313131;
        display: flex;
        justify-content: space-between;
        padding: 40px 0px;
    }
    /* 左边轮播图 */
    .content-left {
        width: 20%;
        float: left;
        position: relative;
        border: 1px solid red;
    }
    .one, .two, .three {
        width: 100%;
    }
    .one img, .two img, .three img {
        width: 70%;
        height: 200px;
    }
    /* 右边轮播图 */
    .content-right {
        width: 78%;
        float: left;
        border: 1px solid teal;
        padding: 60px 0px;
        box-sizing: border-box;
    }
    .one2, .two2, .three2 {
        width: 30%;
        float: left;
        margin-right: 2%;
        margin-bottom: 40px;
    }
    .one2 img, .two2 img, .three2 img {
        width: 100%;
        height: 400px;
    }
    .rtitle {
        width: 100%;
        clear: both;
        margin-top: 30px;
        font-size: 20px;
        color: #fff;
    }

    /* 上下箭头 */
    .carrow-left, .carrow-right {
        width: 60px;
        height: 30px;
        line-height: 30px;
        position: absolute;
        top: -40px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 30px;
        color: #ccc;
        background: #000;
        cursor: pointer;
    }
    .carrow-right {
        top: 650px;
    }
    

    .header {
        width: 100%;
        height: 100%;
    }
    .header-bg, .content-bg {
        background: #000;
        height: 96px;
    }
    .content-bg {
        height: 750px;
        background: #313131;
    }

    .shougong-box {
        margin-top: 40px;
    }
    .show-box {
        width: 1100px;
        margin: 0 auto;
        overflow: hidden;
        margin-bottom: 60px;
    }
    .show-box {
        margin-top: 50px;
        position: relative;
        padding-top: 30px;
    }
    .left, .right {
        display: inline-block;
        width: 40%;
        height: 20px;
        position: relative;
    }
    .left:before,.right:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0px;
        transform: translateY(-50%);
        width: 100%;
        height: 1px;
        background: #000;
    }
    .text {
        margin: 0px 10px;
        font-size: 30px;
    }
    .el-col-5 {
        margin-bottom: 10px;
        position: relative;
        border-radius: 10px;
        cursor: pointer;
    }
    .el-col-5:nth-of-type(4n+1) {
        margin-left: 0px;
    }
    .el-col-5 img {
        border-radius: 10px 10px 0px 0px;
    }
    .el-row {
        padding-left: 4%;
        padding-right: 4%;
    }
    .bottom {
        margin-top: 13px;
        line-height: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .image {
        width: 100%;
        height: 120px;
        display: block;
    }
    .clearfix {
        text-align: left;
    }
    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both
    }
    .clearfix span {
        width: 100%;
        font-size: 12px;
        color: #888;
        margin: 0px 2px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
</style>
